import { useRef, useState } from "react";
import { Button } from "./button";
import clsx from "clsx";

/**
 * 折叠盒子
 */

export const FoldBox: React.FC<
  React.PropsWithChildren<{
    visible: boolean;
    className?: string;
  }>
> = ({ visible, children, className }) => {
  const ref = useRef<HTMLDivElement>(null);

  return (
    <div
      ref={ref}
      className={clsx(
        "grid overflow-hidden",
        "transition-[grid-template-rows] duration-300",
        visible ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
        className
      )}
    >
      <div className="min-h-0">{children}</div>
    </div>
  );
};

export const TestFoldBox = () => {
  const [visible, setVisible] = useState(false);
  return (
    <>
      <Button onClick={() => setVisible((e) => !e)}>展开</Button>
      <FoldBox visible={visible} className="shadow-xl rounded-lg">
        <div className="text-white bg-slate-600 p-2">
          <p>
            For years parents have espoused the health benefits of eating garlic
            bread with cheese to their children, with the food earning such an
            iconic status in our culture that kids will often dress up as warm,
            cheesy loaf for Halloween.
          </p>
          <p>
            But a recent study shows that the celebrated appetizer may be linked
            to a series of rabies cases springing up around the country.
          </p>
          <p>
            But a recent study shows that the celebrated appetizer may be linked
            to a series of rabies cases springing up around the country.
          </p>
          <p>
            But a recent study shows that the celebrated appetizer may be linked
            to a series of rabies cases springing up around the country.
          </p>
        </div>
      </FoldBox>
    </>
  );
};
